<template>
  <div class="bg_white" style="height: calc(100vh - 198px);">
    <div>
      <a-range-picker :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm" :placeholder="['开始时间', '结束时间']" @change="onChange" @ok="onOk" />
      <a-button type="primary" :loading="loading1" @click="init" style="margin: 0  16px ">查询</a-button>
    </div>
    <span style="margin-left: 8px">
      <template v-if="hasSelected">
        <!-- {{ `Selected ${selectedRowKeys.length} items` }} -->
      </template>
    </span>
    <a-table :pagination="false" bordered :rowKey="record=>record.id" :columns="columns" :data-source="data">
    </a-table>
    <a-pagination style="display: flex;justify-content: flex-end;margin: 10px 0;" :pageSizeOptions="pageSizeOptions" show-size-changer :total="totalPage" @showSizeChange="onShowSizeChange" @change="pagechange" />
  </div>
</template>

<script>
const columns = [
  {
    title: '会话',
    dataIndex: 'id',
  },
  {
    title: '登录名',
    dataIndex: 'username',
  },
  {
    title: '用户名',
    dataIndex: 'displayName',
  },
  {
    title: '应用名称',
    dataIndex: 'appName',
  },
  {
    title: '登录时间',
    dataIndex: 'loginTime',
  },
]

import httplogin from '@/api/login'
export default {
  data() {
    return {
      startValue: null,
      endValue: null,
      startValue1: null,
      endValue1: null,
      endOpen: false,
      data: [],
      columns,
      selectedRowKeys: [], // 选中此处以配置默认列
      loading: false,
      loading1: false,
      pageSizeOptions: ['10', '30', '50', '100'],
      current: 1,
      pageSize: 10,
      totalPage: 50,
    }
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0
    },
  },
  mounted() {
    this.init()
  },

  methods: {
    onChange(value, dateString) {
      console.log('Selected Time: ', value);
      console.log('Formatted Selected Time: ', dateString);
      this.startValue = (dateString[0])
      this.endValue = (dateString[1])
    },
    onOk(value) {
      console.log('onOk: ', value);
    },

    // 北京时间：2021-11-18 22:14:24
    /* 时间yyyy-MM-dd HH:mm:ss转为时间戳 */
    timeToTimestamp(time) {
      let timestamp = Date.parse(new Date(time).toString());
      //timestamp = timestamp / 1000; //时间戳为13位需除1000，时间戳为13位的话不需除1000
      console.log(time + "的时间戳为：" + timestamp);
      return timestamp;
      //2021-11-18 22:14:24的时间戳为：1637244864707
    },

    onShowSizeChange(current, pageSize) {
      this.pageSize = pageSize;
      this.current = current;
      this.init()
    },
    pagechange(val) {
      this.current = val;
      this.init()
    },
    init() {
      const data = {
        startDate: this.startValue,
        endDate: this.endValue,
        pageSize: this.pageSize,
        pageNumber: this.current,
        pageSizeOptions: 50,
      }
      httplogin.loginAppsHistory_fetch(data).then((result) => {
        if (result.status == 200) {
          this.data = result.data.data.rows
          this.totalPage = result.data.data.records
        }
      }).catch((err) => {
        console.error(err);
      });
    },
    //查询
    searched() {
      console.log(this.startValue1, this.endValue1);
    },
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
  },
}
</script>

<style scoped>
.ant-table-wrapper {
  background: #fff;
}
</style>
